<template>
	<view class="page">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
			<el-tab-pane label="新人首充配置" name="first">
				<view class="formview">
					<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action"
						:columns="form1.props.columns" :rules="form1.props.rules" :form-type="form1.props.formType"
						:loading.sync="form1.props.loading" :auto-close="true" :show-cancel="false" submit-text="提交修改"
						label-width="140px" @success="onFormSuccess">
					</vk-data-form>
				</view>
				<el-divider></el-divider>
				<el-divider></el-divider>
				演示图例：
				<view style="display: flex;flex-wrap: nowrap;">
					<image src="https://duanju-1257028257.cos.ap-guangzhou.myqcloud.com/houtai/yanshi/IMG_5859.PNG"
						mode="aspectFit"></image>
					<image src="https://duanju-1257028257.cos.ap-guangzhou.myqcloud.com/houtai/yanshi/IMG_5860.PNG"
						mode="aspectFit"></image>
				</view>
			</el-tab-pane>

			<!-- <el-tab-pane label="选项卡3" name="third">
				备用选项卡3
			</el-tab-pane>

			<el-tab-pane label="选项卡4" name="fourth">
				备用选项卡4
			</el-tab-pane> -->

		</el-tabs>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	const db = uniCloud.database();

	export default {
		data() {
			return {
				activeName: 'first',
				// 表单相关开始-----------------------------------------------------------
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {

					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "admin/pages/kh/xcxpz/xrscpz/update",
						// 表单字段显示规则
						columns: [{
								"key": "xrscState",
								"title": "新人首充开关",
								"width": 300,
								"type": "switch"
							},
							{
								"key": "indexpic",
								"title": "首页弹窗图片",
								"type": "file-select",
								"placeholder": "请选择图片",
								"fileType": "image",
								"limit": 1
							},
							{
								"key": "recharge_amount",
								"title": "支付金额(元)",
								"type": "money",
								"width": 300
							},
							{
								"key": "bean",
								"title": "金豆数量",
								"type": "number",
								"width": 300
							},
							{
								"key": "recharge_text",
								"title": "充值说明",
								"type": "textarea",
								"autosize": {
									minRows: 4,
									maxRows: 10
								}
							}
						],
						// 表单验证规则
						rules: {
							indexpic: [{
								required: true,
								message: "首页弹窗图片不能为空",
								trigger: "change"
							}],
							recharge_amount: [{
								required: true,
								message: "支付金额不能为空",
								trigger: "change"
							}],
							bean: [{
								required: true,
								message: "金豆数量不能为空",
								trigger: "change"
							}],
							recharge_text: [{
								required: true,
								message: "充值说明不能为空",
								trigger: "change"
							}]
						},
						// add 代表添加 update 代表修改
						formType: "update",
						// 表单是否在请求中
						loading: false,
						// 是否显示表单1 的弹窗
						show: false
					}
				},
				// 表单相关结束-----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
		},
		async onShow() {
			// if (vk.vuex.get('$user.userInfo.role[0]') != "admin") {
			// 	vk.navigateToLogin();
			// }
			this.loadData()
		},
		onReady() {

		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			async loadData() {
				const config_youhui = await db.collection('a_config').where({
					name: "youhui"
				}).get()
				this.form1.data = config_youhui.result.data[0];
			},
			onFormSuccess() {
				this.loadData()
			}
		}
	};
</script>

<style>
	.page {
		padding-top: 20px;
	}

	.formview {
		width: 40%;
	}
</style>
